<template>
  <div class="home-container">
    <h1 class="page-title">欢迎使用管理系统</h1>
    <div class="button-group">
      <router-link
          to="/factories"
          class="nav-button"
      >
        打开工厂界面
      </router-link>
      <router-link
          to="/warehouse"
          class="nav-button"
      >
        打开仓库
      </router-link>
    </div>
  </div>
</template>

<style>
/* 全局样式重置（非scoped） */
body {
  margin: 0;
  padding: 0;
}
</style>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 0 1rem; /* 添加水平内边距避免内容贴边 */
  box-sizing: border-box; /* 确保padding不会增加容器总宽度 */
}

.page-title {
  color: #333;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.button-group {
  display: flex;
  gap: 1rem;
}

.nav-button {
  padding: 0.8rem 2rem;
  background-color: #42b983;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.nav-button:hover {
  background-color: #359469;
}

/* 手机竖屏适配 */
@media (max-width: 768px) {
  .page-title {
    font-size: 1.5rem; /* 减小标题字体 */
    margin-bottom: 1.5rem; /* 减少底部间距 */
  }

  .button-group {
    flex-direction: column; /* 按钮垂直排列 */
    gap: 0.8rem; /* 减小按钮间距 */
    width: 100%; /* 按钮组占满宽度 */
  }

  .nav-button {
    padding: 0.6rem 1.2rem; /* 减小按钮内边距 */
    font-size: 0.9rem; /* 减小按钮字体 */
    text-align: center; /* 确保按钮文字居中 */
    width: 100%; /* 按钮占满父容器宽度 */
  }
}
</style>
